<template>
	<view class="citys">
		<scroll-view scroll-y="true" @scroll="onScroll" :scroll-into-view="scoll_to_slg" enable-back-to-top="true" :style="{height:h}">
			<view v-for='(item, index) in f_city_list' :key='index' :id="item.head">
				<view class="c-list-head">{{item.head}}</view>
				<view class="c-list-city" @click="onGetCityName(value)" v-for='(value, key) in item.valueList' :key="key">
					<view class="c-list-city-name">{{value.cityName}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="tips">
			<view v-for="(item, index) in headList" @click.stop="onSelTip(item)" :key="index" :class="item==s_selected?'tips-tip active':'tips-tip'">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	import { city_list } from "@/common/citylist.js"
	let task = null;
	let mode = 'scroll';
	let total_length = 0;
	let cur = 0;
	let cur_letter = '';
	export default {
		data() {
			return {
				f_city_list: [],
				h: "500px",
				headList: [],
				s_selected: "T",
				scoll_to_slg: "T"
			}
		},
		onLoad: function() {
			this.filterCityData();
			uni.getSystemInfo({
				success: (res) => {
					this.h = res.windowHeight + "px";
				}
			})
		},
		methods: {
			onGetCityName(e){
				const cityCode = e.cityCode
				const cityName = e.cityName
				uni.$emit('seletedCity', {cityCode, cityName})
				uni.navigateBack({
				   delta: 1
				});
			},
			onScroll(e) {
				if (mode === 'click') {
					mode = 'scroll';
					return
				}
				if (task !== null) {
					clearTimeout(task);
					task = null;
				}
				task = setTimeout(() => {
					const srlTop = e.target.scrollTop;
					const srlHeight = e.target.scrollHeight;
					let idx = Math.ceil(total_length * srlTop / srlHeight);
					if (this.headList[idx] != this.scoll_to_slg) {
						cur = 0;
						this.getLetter(this.f_city_list, idx);
						this.s_selected = cur_letter;
					}
				}, 50)
			},
			onSelTip(v) {
				mode = 'click';
				this.scoll_to_slg = this.s_selected;
				setTimeout(() => {
					this.scoll_to_slg = v;
					this.s_selected = v;
				}, 0)
			},
			getLetter(list, idx) {
				for (var i = 0; i < list.length; i++) {
					const item = list[i];
					cur++;
					if (idx === cur) {
						cur_letter = item.head;
						break;
					}
					if (item.valueList) {
						for (var j = 0; j < item.valueList.length; j++) {
							cur++;
							if (idx === cur) {
								cur_letter = item.head;
								return;
							}
						}
					}

				}
			},
			filterCityData() {
				const cityList = city_list;
				total_length = cityList.length;
				const cityListNew = [];
				for (let elem of cityList.values()) {
					const head = elem.headcharacter;
					const index = this.headList.indexOf(head);
					if (index <= -1) {
						this.headList.push(head);
						cityListNew.push({
							head,
							valueList: [elem]
						})
					} else {
						cityListNew[index].valueList.push(elem);
					}
				}
				this.headList = this.headList.sort()
				this.f_city_list = cityListNew.sort((a, b) => {
					return a.head.charCodeAt() - b.head.charCodeAt()
				})
				this.s_selected = this.headList[0];
				this.scoll_to_slg = this.headList[0];
				total_length = total_length + this.headList.length;
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}
	.c-list-head {
		padding: 20rpx 30rpx;
		font-size: 26rpx;
	}

	.c-list-city {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.c-list-city-name {
		padding: 20rpx 0;
		font-size: 34rpx;
		border-bottom: solid 2rpx #F1F5F6;
	}

	.tips {
		position: fixed;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.tips-tip {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		font-size: 26rpx;
		letter-spacing: 0;
		text-align: center;
		line-height: 30rpx;
		margin-top: 16rpx;
	}

	.active {
		background-color: #4497e1;
		color: #ffffff;
	}
</style>
